<template>
  <a-modal
    v-model:open="visible"
    title="绿通服务订单处理"
    :maskClosable="false"
    :bodyStyle="store.userStore.bodyStyle"
  >
    <a-form :labelCol="{ style: { width: '80px' } }" ref="formRef" :model="orderData">
      <a-form-item label="患者手机号">
        {{ orderData ? orderData.phone : '' }}
      </a-form-item>
      <a-form-item label="患者姓名">
        {{ orderData ? orderData.patName : '' }}
      </a-form-item>
      <a-form-item label="订单状态" name="state">
        <a-radio-group v-model:value="orderData.state">
          <a-radio :value="'TODO'"> 待处理 </a-radio>
          <a-radio :value="'DONE'"> 已完成 </a-radio>
          <a-radio :value="'CANCEL'"> 取消订单 </a-radio>
        </a-radio-group>
      </a-form-item>
    </a-form>
    <template #footer>
      <a-button key="back" @click="visible = false"> 取消 </a-button>
      <a-button key="submit" type="primary" @click="saveHandle" :loading="loading"> 提交 </a-button>
    </template>
  </a-modal>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { saveGreenWayOrder } from '@/api/greenWayOrder/index'
import store from '@/store'
import { message } from 'ant-design-vue'
const emit = defineEmits(['close'])
const visible = ref(false)
const loading = ref(false)

const initState = ref('')

const formRef = ref()
const orderData = reactive({
  phone: '',
  patName: '',
  state: ''
})
const init = (data) => {
  visible.value = true
  loading.value = false
  initState.value = ''

  nextTick(() => {
    formRef.value.resetFields()

    if (data) {
      Object.assign(orderData, data)

      initState.value = orderData.state
    }
  })
}

// 提交
const saveHandle = () => {
  formRef.value.validate().then(() => {
    delete orderData.createTime
    delete orderData.creator

    if (initState.value == orderData.state) {
      message.warning('订单状态未变更!')
      return
    }

    loading.value = true
    saveGreenWayOrder(orderData)
      .then((res) => {
        loading.value = false
        message.success('操作成功')
        visible.value = false
        emit('close')
      })
      .catch(() => {
        loading.value = false
      })
  })
}

defineExpose({
  init
})
</script>
<style lang="less" scoped></style>
